<!DOCTYPE html>
<html class="enable-dark">

<head>
    <meta charset=utf-8>
    <meta content="width=device-width,initial-scale=1" name=viewport>
    <title>mikufans录播姬 __VERSION__</title>
    <style>
        html {
            font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", SimHei, sans-serif;
        }

        @media (prefers-color-scheme: dark) {
            html.enable-dark {
                background-color: #292a2d;
                color: #eee;
            }

            html.enable-dark a {
                color: #eee;
            }

            html.enable-dark .card {
                background-color: #444546;
                color: #eee;
            }
        }

        .links {
            margin: auto;
            max-width: 240px;
        }

        .group h2 {
            margin-bottom: 0;
        }

        .group {
            margin: 40px 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .card:hover {
            box-shadow: 0px 0px 8px 2px #4682b4;
        }

        .card {
            color: #000;
            background: #eee;
            margin: 5px 0;
            padding: 0 10px;
            border: 2px solid lightblue;
            border-radius: 5px;
            transition: 0.1s ease-out;
        }

        @media (min-width: 769px) {
            .links {
                display: flex;
                justify-content: space-evenly;
                max-width: 840px;
            }

            .card {
                width: 230px;
            }
        }

        .name {
            font-size: 1.1em;
            margin: 1rem 0 0 0;
        }

        .path {
            font-family: monospace;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center">mikufans录播姬</h1>
    <p style="text-align: center;font-family:'Courier New', Courier, monospace;" title="__FULL_VERSION__">
        __VERSION__
    </p>
    <p style="text-align: center;"><a href="https://rec.danmuji.org">https://rec.danmuji.org</a></p>
    <div>
        <div class="links">
            <div class="group">
                <h2>录播姬管理界面</h2>
                <p>&nbsp;</p>
                <a href="./ui/">
                    <div class="card">
                        <p class="name">mikufans录播姬 WebUI</p>
                        <p class="path">/ui</p>
                    </div>
                </a>
                <a href="./file/">
                    <div class="card">
                        <p class="name">录播文件浏览器</p>
                        <p class="path">/file</p>
                    </div>
                </a>
                <a href="./player/">
                    <div class="card">
                        <p class="name">视频播放器</p>
                        <p class="path">/player</p>
                    </div>
                </a>
            </div>
            <div class="group">
                <h2>REST API</h2>
                <p>API 路径: <span style="font-family: monospace;">/api</span></p>
                <a href="./swagger">
                    <div class="card">
                        <p class="name">Swagger UI</p>
                        <p class="path">/swagger</p>
                    </div>
                </a>
            </div>
            <div class="group">
                <h2>GraphQL API</h2>
                <p>API 路径: <span style="font-family: monospace;">/graphql</span></p>
                <a href="./graphql/graphiql">
                    <div class="card">
                        <p class="name">GraphiQL</p>
                        <p class="path">/graphql/graphiql</p>
                    </div>
                </a>
                <a href="./graphql/playground">
                    <div class="card">
                        <p class="name">Playground</p>
                        <p class="path">/graphql/playground</p>
                    </div>
                </a>
                <a href="./graphql/altair">
                    <div class="card">
                        <p class="name">Altair</p>
                        <p class="path">/graphql/altair</p>
                    </div>
                </a>
                <a href="./graphql/voyager">
                    <div class="card">
                        <p class="name">Voyager</p>
                        <p class="path">/graphql/voyager</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>

</html>
